<template>
    <div>
        <!--导航面包屑-->
        <slot name="crumbs">
            <xy-crumbs></xy-crumbs>
        </slot>

        <!--内容-->
        <div class="xy-container">
            <el-row>
                <!--左侧-->
                <el-col v-if="leftSideSpanSize>0" :span="leftSideSpanSize">
                    <el-container style="max-height: 636px;border-right: 1px dashed #dedede; margin-right: 10px">
                        <el-main>
                            <el-scrollbar class="custom-scrollbar" style="min-height: 594px;">
                                <slot name="leftSide"></slot>
                            </el-scrollbar>
                        </el-main>
                    </el-container>
                </el-col>
                <!--主体-->
                <el-col :span="mainBodySpanSize">
                    <!--工具栏-->
                    <div class="xy-tool-bar">
                        <slot name="toolbar"></slot>
                        <div style="float: right" v-if="hasToolbarAbbrSlot">
                            <el-dropdown @command="toolbarAbbrCommand">
                                <span class="el-dropdown-link">更多操作<i
                                        class="el-icon-arrow-down el-icon--right"></i></span>
                                <el-dropdown-menu slot="dropdown">
                                    <slot name="toolbarAbbr"></slot>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                    <!--面板内容-->
                    <slot></slot>
                </el-col>
            </el-row>

        </div>

    </div>
</template>

<script>
    import xyCrumbs from './Crumbs';

    /**
     * 默认操作面板
     * @author yangjunxiong
     * @date 2019/7/22 11:19.
     */
    export default {
        name: 'generalPanel',
        mounted() {

        },
        components: {
            xyCrumbs
        },
        props: {},
        data() {
            return {}
        },
        computed: {

            /**
             * 【左】侧边栏的 span 值
             * @author yangjunxiong
             * @date 2019/7/24 9:56
             */
            leftSideSpanSize() {
                return this.$slots.leftSide ? 4 : 0;
            },
            /**
             * 中间内容的 span 值
             * @author yangjunxiong
             * @date 2019/7/24 9:58
             */
            mainBodySpanSize() {
                return this.$slots.leftSide ? 20 : 24;
            },
            /**
             * 是否有缩略工具栏
             * @author yangjunxiong
             * @date 2019/7/24 9:55
             */
            hasToolbarAbbrSlot() {
                return this.$slots.toolbarAbbr;
            }
        },
        methods: {
            /**
             * 更多工具栏点击事件
             * @author yangjunxiong
             * @date 2019/7/22 15:09
             */
            toolbarAbbrCommand(cmd) {
                this.$emit("toolbarClick", cmd);
            }
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style scoped>
    .xy-container {
        padding: 13px 30px 0 30px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .xy-tool-bar {
        margin-bottom: 12px;
    }
</style>